<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram: Boiler on Stove</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>

<canvas id="physicsCanvas" width="500" height="420"></canvas>

<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // --- Style and Configuration ---
    ctx.lineWidth = 3;
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.font = 'bold 24px Times New Roman';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // --- Core Parameters ---
    const centerX = canvas.width / 2;
    const centerY = 190;
    const radius = 100; // Represents R
    const halfDist = 80; // Represents l/2

    // --- Geometric Calculations ---
    // Calculate the vertical drop from the center to the support points using Pythagoras: y = sqrt(R^2 - (l/2)^2)
    const y_offset = Math.sqrt(radius * radius - halfDist * halfDist);

    const contactPointY = centerY + y_offset;
    const contactPointA_X = centerX - halfDist;
    const contactPointB_X = centerX + halfDist;

    // Helper function to draw an arrow
    function drawArrow(ctx, fromX, fromY, toX, toY, headLength = 10) {
        const dx = toX - fromX;
        const dy = toY - fromY;
        const angle = Math.atan2(dy, dx);
        ctx.beginPath();
        ctx.moveTo(fromX, fromY);
        ctx.lineTo(toX, toY);
        ctx.lineTo(toX - headLength * Math.cos(angle - Math.PI / 6), toY - headLength * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(toX, toY);
        ctx.lineTo(toX - headLength * Math.cos(angle + Math.PI / 6), toY - headLength * Math.sin(angle + Math.PI / 6));
        ctx.stroke();
    }
    
    // --- Drawing Functions ---

    // 1. Draw the brick walls
    function drawWalls() {
        const wallWidth = 60;
        const wallHeight = 100;
        const brickHeight = 20;

        // --- Left Wall ---
        ctx.beginPath();
        ctx.rect(contactPointA_X - wallWidth, contactPointY, wallWidth, wallHeight);
        ctx.stroke();
        // Brick pattern for left wall
        for (let i = 1; i < wallHeight / brickHeight; i++) {
            const y = contactPointY + i * brickHeight;
            ctx.moveTo(contactPointA_X - wallWidth, y);
            ctx.lineTo(contactPointA_X, y);
            // Staggered vertical lines
            if (i % 2 !== 0) {
                 ctx.moveTo(contactPointA_X - wallWidth / 2, y - brickHeight);
                 ctx.lineTo(contactPointA_X - wallWidth / 2, y);
            } else {
                 ctx.moveTo(contactPointA_X - wallWidth / 3, y - brickHeight);
                 ctx.lineTo(contactPointA_X - wallWidth / 3, y);
                 ctx.moveTo(contactPointA_X - 2*wallWidth / 3, y - brickHeight);
                 ctx.lineTo(contactPointA_X - 2*wallWidth / 3, y);
            }
        }
        ctx.stroke();

        // --- Right Wall ---
        ctx.beginPath();
        ctx.rect(contactPointB_X, contactPointY, wallWidth, wallHeight);
        ctx.stroke();
        // Brick pattern for right wall
        for (let i = 1; i < wallHeight / brickHeight; i++) {
            const y = contactPointY + i * brickHeight;
            ctx.moveTo(contactPointB_X, y);
            ctx.lineTo(contactPointB_X + wallWidth, y);
             // Staggered vertical lines
            if (i % 2 !== 0) {
                 ctx.moveTo(contactPointB_X + wallWidth / 2, y - brickHeight);
                 ctx.lineTo(contactPointB_X + wallWidth / 2, y);
            } else {
                 ctx.moveTo(contactPointB_X + wallWidth / 3, y - brickHeight);
                 ctx.lineTo(contactPointB_X + wallWidth / 3, y);
                 ctx.moveTo(contactPointB_X + 2*wallWidth / 3, y - brickHeight);
                 ctx.lineTo(contactPointB_X + 2*wallWidth / 3, y);
            }
        }
        ctx.stroke();
    }

    // 2. Draw the boiler (circle)
    function drawBoiler() {
        ctx.beginPath();
        ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
        ctx.stroke();
    }

    // 3. Draw labels and dimension lines
    function drawLabelsAndDimensions() {
        // Label 'O' for the center
        ctx.beginPath();
        ctx.arc(centerX, centerY, 4, 0, 2 * Math.PI); // Small circle for the center point
        ctx.fill();
        ctx.fillText('O', centerX - 20, centerY);

        // Radius 'R'
        const angleR = -Math.PI / 3.5; // Angle for the radius line
        const endRX = centerX + radius * Math.cos(angleR);
        const endRY = centerY + radius * Math.sin(angleR);
        drawArrow(ctx, centerX, centerY, endRX, endRY);
        ctx.fillText('R', centerX + 45, centerY - 20);

        // Labels 'A' and 'B' for contact points
        ctx.fillText('A', contactPointA_X - 20, contactPointY - 20);
        ctx.fillText('B', contactPointB_X + 20, contactPointY - 20);

        // Dimension 'l'
        const dimLineY = contactPointY + 50;
        ctx.beginPath();
        // Main line
        ctx.moveTo(contactPointA_X, dimLineY);
        ctx.lineTo(contactPointB_X, dimLineY);
        // Ticks
        ctx.moveTo(contactPointA_X, dimLineY - 10);
        ctx.lineTo(contactPointA_X, dimLineY + 10);
        ctx.moveTo(contactPointB_X, dimLineY - 10);
        ctx.lineTo(contactPointB_X, dimLineY + 10);
        // Arrow heads
        drawArrow(ctx, centerX - 20, dimLineY, contactPointA_X, dimLineY, 10);
        drawArrow(ctx, centerX + 20, dimLineY, contactPointB_X, dimLineY, 10);
        ctx.stroke();
        
        ctx.font = 'italic bold 24px Times New Roman';
        ctx.fillText('l', centerX, dimLineY - 20);
    }

    // --- Execute Drawing ---
    drawWalls();
    drawBoiler();
    drawLabelsAndDimensions();

</script>

</body>
</html>